<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:o="http://omnifaces.org/ui">

    <style>
        .ui-menubutton button{
            width: 25px;
            height: 18px !important;
        }
        /*
        .ui-picklist .ui-widget .ul{
            width: 300px !important;
        }
        
        .ui-widget-content .ui-picklist-list 
        .ui-picklist-source .ui-corner-bottom
        .ui-sortable{
            width: 300px !important;
        }
        */
        .ui-picklist ul{
            width: 500px !important;
            height: 500px !important;
        }
        .ui-picklist .ui-picklist-filter-container{
            width: 500px !important;
        }
    </style>


    <p:panel header="CONTROL DE GRADO DE BACHILLER" style="border: none;">
        <div align="center">
            <h:form id="dataForm" style="border-style: solid; border-color: #069; font-weight: bold; width: 99%">
                <p>
                    <h:panelGrid columns="5" >
                        <p:graphicImage value="/resources/images/studentSearch.png" width="40px"/>
                        <h:outputText value="CODIGO DEL ALUMNO A BUSCAR : "/> 
                        <p:inputText required="true" title="Ejemplo: 0020110377" value="#{bachillorBean.codeAlumn}"
                                     requiredMessage="Debe ingresar el código para buscar" maxlength="10"/>  
                        <p:commandButton value="VALIDAR" id="focus"
                                         action="#{bachillorBean.searchAlumn}"
                                         title="Busqueda de datos mediante una conexión a OCDA, esta operación puede tardar unos minutos"
                                         styleClass="ui-priority-primary" 
                                         icon="ui-icon ui-icon-disk" update="@form,:formRequirement">

                        </p:commandButton>
                        <p:graphicImage value="/resources/images/studentSearch.png" width="40px"/>
                        <div align="center">

                        </div>
                    </h:panelGrid>
                </p>
            </h:form><br/>

            <!--mostrando los tipos de comisiones 
            <h:form id="listForm" style="border-style: solid; border-color: #069; font-weight: bold; width: 99%">
                <br/>
                <p:panelGrid style="width: 98%" >
                    <p:row>
                        <p:column style="width: 100px">
                            <p:graphicImage value="/resources/images/student.png" width="150px">
                            </p:graphicImage>
                        </p:column>
                        <p:column>
                            <p:panelGrid columns="4" style="width: 100%">
                                <f:facet name="header">  
                                    DATOS PERSONALES DEL ALUMNO
                                </f:facet>
                                <h:outputLabel value="CODIGO : " />  
                                <h:outputLabel value="Ningun Dato" style="color: #069"/>
                                <h:outputLabel value="NOMBRE :" />
                                <h:outputLabel value="Ningun Dato" style="color: #069"/>
                                <h:outputLabel value="AP. PATERNO : " />  
                                <h:outputLabel value="Ningun Dato" style="color: #069"/>
                                <h:outputLabel value="AP. MATERNO :" />
                                <h:outputLabel value="Ningun Dato" style="color: #069"/>
                                <h:outputLabel value="SEXO : " />  
                                <h:outputLabel value="Ningun Dato" style="color: #069"/>
                                <h:outputLabel value="FECHA NAC. :" />
                                <h:outputLabel value="Ningun Dato" style="color: #069"/>
                                <h:outputLabel value="TELEFONO :" />
                                <h:outputLabel value="Ningun Dato" style="color: #069"/>
                                <h:outputLabel value="CELULAR :" />
                                <h:outputLabel value="Ningun Dato" style="color: #069"/>
                            </p:panelGrid>
                        </p:column>
                    </p:row>
                </p:panelGrid>
            -->
            <!--
            <p:panelGrid columns="4" style="width: 98%">
                <f:facet name="header">  
                    OTROS DATOS DEL ALUMNO 
                </f:facet>
                <h:outputLabel value="CODIGO ESP. : " />  
                <h:outputLabel value="Ningun Dato" style="color: #069"/>
                <h:outputLabel value="NOMBRE ESP. :" />
                <h:outputLabel value="Ningun Dato" style="color: #069"/>
                <h:outputLabel value="SEMESTRE. : " />  
                <h:outputLabel value="Ningun Dato" style="color: #069"/>
                <h:outputLabel value="TIPO SEMESTRE :" />
                <h:outputLabel value="Ningun Dato" style="color: #069"/>
            </p:panelGrid><br/>
        </h:form>
            -->

            <h:form style="border-style: solid; border-color: #069; font-weight: bold; width: 99%" 
                    id="formRequirement" >
                <p>
                    <h:panelGrid columns="3" >
                        <p:graphicImage value="/resources/images/studentSearch.png" width="40px"/>
                        <h:outputText value="VALIDANDO ULTIMOS REQUISITOS"/>   
                        <p:graphicImage value="/resources/images/studentSearch.png" width="40px"/>
                    </h:panelGrid>
                </p>
                <br/>
                <p:outputPanel rendered="#{bachillorBean.existAlumn}">
                    <p:commandButton value="Guardar los Requisitos" action="#{bachillorBean.saveAlumnRequirement}"/>
                    <p:pickList id="pickList" value="#{bachillorBean.dualListModelRequirement}" converter="requirementconver"
                                itemLabel="#{requirement.name}" itemValue="#{requirement}" var="requirement" showCheckbox="true"
                                showSourceFilter="true" showTargetFilter="true" filterMatchMode="contains" >
                        <o:converter converterId="omnifaces.ListConverter" />
                        
                        <p:ajax event="transfer" listener="#{bachillorBean.onTransfer}" /> 
                        
                        <f:facet name="sourceCaption">Available</f:facet>  
                        <f:facet name="targetCaption">Starting</f:facet>    

                        <p:column style="width:100px;">  
                            #{requirement.state}
                        </p:column>  

                        <p:column style="width:400px;">  
                            #{requirement.name}  
                        </p:column>  

                    </p:pickList>
                </p:outputPanel>

            </h:form><br/>
        </div>
    </p:panel>
</ui:composition>
